<template>
    <div class="order-container container">
        <NavBar
            :title="title" 
            rightText="编辑">
        </NavBar>
        <div class="item-box">
            <div class="item" v-for="(item,index) of listItem" :key="item.id">
                <van-cell-group>
                <div class="type-select" v-if="item.type==='select'">
                    <van-field 
                    readonly
                    is-link
                    v-model="item.model"  
                    :label="item.title" 
                    :placeholder="item.placeholder"
                    :required="item.isRequired"
                    @click="item.showPicker = true"
                    />
                    <van-popup 
                    v-model="item.showPicker" 
                    position="bottom">
                        <van-picker
                        :title="item.title"
                        show-toolbar
                        :columns="item.columns"
                        @confirm="onPickerConfirm($event,index)"
                        @cancel="item.showPicker = false"
                        />
                    </van-popup>
                </div>
                <div class="type-text" v-if="item.type==='text'">
                    <van-field 
                    v-model="item.model" 
                    :label="item.title" 
                    :placeholder="item.placeholder"
                    :required="item.isRequired"
                    />
                </div>
                <div class="type-datetime" v-if="item.type==='datetime'">
                    <van-field
                    :required="item.isRequired"
                    v-model="item.model"
                    readonly
                    clickable
                    :label="item.title"
                    :placeholder="item.placeholder"
                    @click="item.showPicker = true"
                    is-link
                    />
                    <van-popup 
                    v-model="item.showPicker" 
                    position="bottom">
                        <van-datetime-picker
                            type="datehour"
                            :formatter="formatter"
                            @confirm="datetimeConfirm($event,index)"
                            @cancel="item.showPicker = false"
                        />
                    </van-popup>

                </div>
                <div class="type-textarea" v-if="item.type==='textarea'">
                    <van-field
                    :required="item.isRequired"
                    v-model="item.model"
                    rows="3"
                    autosize
                    :label="item.title"
                    type="textarea"
                    :placeholder="item.placeholder"
                    />
                </div>
                <div class="type-custom type-picture" v-if="item.type==='picture'">
                    <div class="label">
                        <span class="require" v-if="item.isRequired">*</span>
                        <span class="title">{{item.title}}</span>
                    </div>
                    <div class="content">
                        <van-uploader 
                        :multiple="item.multiple" 
                        v-model="item.fileList" 
                        :after-read="afterRead" 
                        :max-count="item.maxCount"
                        />
                    </div>
                </div>

                <div class="type-custom type-examiner" v-if="item.type==='examiner'">
                    <div class="label">
                        <span class="require" v-if="item.isRequired"> *</span>
                        <span class="iconfont iconuser"></span>
                        <span class="title">{{item.title}}</span>
                    </div>
                    <div class="content">
                        <div class="user" v-for="item1 of item.users" :key="item1.userid">
                            <div class="icon">
                                <img class="fullimg" :src="item1.icon" v-if="item1.icon">
                                <span v-else class="iconfont iconlianxiren"></span>
                            </div>
                            <span class="name">{{ item1.name}}</span>
                        </div>
                        <div class="add-box">
                            <span class="iconfont icon54" @click="doshowEnterpriseStructure(index)"></span>
                        </div>
                    </div>
                </div>

                <div class="type-custom type-executor" v-if="item.type==='executor'">
                    <div class="label">
                        <span class="require" v-if="item.isRequired"> *</span>
                        <span class="iconfont iconuser"></span>
                        <span class="title">{{item.title}}</span>
                    </div>
                    <div class="content">
                        <div class="user" v-for="item1 of item.users" :key="item1.userid">
                            <div class="icon">
                                <img class="fullimg" :src="item1.icon" v-if="item1.icon">
                                <span v-else class="iconfont iconlianxiren"></span>
                            </div>
                            <span class="name">{{ item1.name}}</span>
                        </div>
                        <div class="add-box">
                            <span class="iconfont icon54"></span>
                        </div>
                    </div>
                </div>

                <div class="type-custom type-copyperson" v-if="item.type==='copyperson'">
                    <div class="label">
                        <span class="require" v-if="item.isRequired"> *</span>
                        <span class="iconfont iconuser"></span>
                        <span class="title">{{item.title}}</span>
                        <span class="desc">(审批人全部同意后，将抄送给以下人员)</span>
                    </div>
                    <div class="content">
                        <div class="user" v-for="item1 of item.users" :key="item1.userid">
                            <div class="icon">
                                <img class="fullimg" :src="item1.icon" v-if="item1.icon">
                                <span v-else class="iconfont iconlianxiren"></span>
                            </div>
                            <span class="name">{{ item1.name}}</span>
                        </div>
                        <div class="add-box">
                            <span class="iconfont icon54"></span>
                        </div>
                    </div>
                </div>
                </van-cell-group>
            </div>
            <van-button class="create-btn" @click="submit" type="info" block>创建</van-button>
        </div>
    </div>
</template>
<script>
import {Toast} from 'vant';
import NavBar from '@/components/navbar';
import moment from 'moment';
import {mapState} from 'vuex';
export default {
    name: 'Ordercreate',
    components:{
        NavBar,
    },
    data () {
        return {
            templateid:'',
            title:'',
            listItem:[],
            choosenIndex:0
        }
    },
    created() {
        let templateData = this.$route.params.templateData;
        templateData = JSON.parse(templateData);
        this.templateid = templateData.templateid;
        this.title = templateData.title;
        this.listItem = templateData.list;
    },
    mounted() {
        console.log('Ordercreate mounted');
    },
    computed:{
        ...mapState(['choosen'])
    },
    watch: {
        choosen(newValue) {
            let item = this.listItem[this.choosenIndex];
            item.users.push(newValue);
            this.$set(this.listItem,this.choosenIndex,item);
        }
    }, 
    methods:{
        leftClick() {
            
        }, 
        rightClick() {
            
        }, 
        doshowEnterpriseStructure(index) {
            this.choosenIndex = index;
            this.$animatePush('/enterprisestructurechoosenone');
        },
        afterRead(file,index) {
            
        },
        submit() {
            for(let item of this.listItem) {
                if(item.isRequired) {
                    switch(item.type) {
                        case 'picture':
                            if(item.fileList.length <= 0) {
                                Toast(item.placeholder);
                                return;
                            }
                            break;
                        case 'examiner':
                            if(item.users.length <= 0) {
                                Toast(item.placeholder);
                                return;
                            }
                            break;
                        default:
                            if(!item.model) {
                                Toast(item.placeholder);
                                return;
                            }
                    }
                }
            }
            Toast.loading({
                message:'创建中...',
                duration:0
            })
            setTimeout(() => {
                Toast.clear();
                Toast.success('创建成功，请敬候佳音');
                setTimeout(() => {
                    this.$animateBack();
                },2000);
            },1000)
        },
        datetimeConfirm(value,index) {
            let date = moment(value).format('YYYY-MM-DD HH');
            let item = this.listItem[index];
            item.model = date;
            item.showPicker = false;
            this.$set(this.listItem,index,item);
            
        },
        onPickerConfirm(value,index) {
            let item = this.listItem[index];
            item.model = value;
            item.showPicker = false;
            this.$set(this.listItem,index,item);
        },
        formatter(type, val) {
            if (type === 'year') {
                return val + ' 年';
            }
            if (type === 'month') {
                return parseInt(val) + ' 月';
            }
            if (type === 'day') {
                return parseInt(val) + ' 日';
            }
            if (type === 'hour') {
                return val + ' 时';
            }
            return val;
        },
    },
    activated() {
        let templateData = this.$route.params.templateData;
        templateData = JSON.parse(templateData);
        if(templateData.templateid !== this.templateid) {
            this.templateid = templateData.templateid;
            this.title = templateData.title;
            this.listItem = templateData.list;
        }
    },
    deactivated() {
        console.log('deactivated');
    }
}
</script>
<style lang="less">
@import '../../../css/var.less';
.order-container {
    padding-top:40px;
    font-size: 14px;
    color:#666;
    .item-box {
        .type-custom {
            padding:10px 10px 15px 10px;
            .label {
                .require {
                    margin-right: 5px;
                    color:#ee0a24;
                }
                .iconfont {
                    font-size:18px;
                }
                .title {
                    margin-left: 2px;
                }
            }
            .content {
                margin-top:20px;
                display:flex;
                flex-direction:row;
                justify-content:flex-start;
                flex-wrap: wrap;
                .user {
                    margin-bottom: 20px;
                    margin-right: 20px;
                    display:flex;
                    flex-direction: column;
                    justify-content:center;
                    align-items:center;
                    .icon {
                        width:40px;
                        height:40px;
                        line-height:35px;
                        text-align: center;
                        background:@color;
                        border-radius: 5px;
                        overflow: hidden;
                        .iconfont {
                            color:#fff;
                            font-size: 24px;
                        }
                    }
                    .name {
                        margin-top:10px;
                        font-size: 12px;
                    }
                }
                .add-box {
                    align-self: flex-start;
                    .iconfont {
                        font-size:44px;
                    }
                }
            }
        }
        .type-picture {
            margin-top:0;
        }
        .type-copyperson {
            .label {
                .desc {
                    margin-left: 3px;
                    color:#999;
                }
            }
        }
    }
}
</style>